<div class="card card-accent-info">
  <div class="card-body">
    <h4 class="card-title">Use [theme] to set echarts theme</h4>
    <hr>
    <button class="btn btn-outline-primary" (click)="theme=undefined">default</button>
    <button class="btn btn-outline-primary ml-4" (click)="theme='macarons'">macarons</button>
    <button class="btn btn-outline-primary ml-4" (click)="theme='dark'">dark</button>
    <hr>
    <h5> Current Theme: {{ theme ? theme : 'default' }} </h5>
    <div echarts [options]="options" [theme]="theme" class="demo-chart"></div>
    <div class="mt-4">
      <tabset>
        <tab heading="html">
          <markdown [data]="demo_html | language: 'html'"></markdown>
        </tab>
        <tab heading="main.ts">
          <markdown [data]="demo_main_ts | language: 'typescript'"></markdown>
        </tab>
        <tab heading="component">
          <markdown [data]="demo_ts | language: 'typescript'"></markdown>
        </tab>
      </tabset>
    </div>
  </div>
</div>